<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>业务权重管理</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        table, th, td {
            border: 1px solid #ddd;
        }

        th, td {
            padding: 12px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        .actions button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 5px;
            font-size: 14px;
        }

        .actions button.delete {
            background-color: #dc3545;
        }

        .actions button.edit {
            background-color: #28a745;
        }

        .actions button:hover {
            opacity: 0.8;
        }

        form {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        form input[type="text"], form input[type="number"] {
            padding: 8px;
            width: 45%;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        form button {
            padding: 8px 16px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        form button:hover {
            background-color: #218838;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>业务权重管理</h1>

    <form id="addBusinessForm">
        <input type="text" id="systemId" placeholder="业务ID" required>
        <input type="text" id="systemName" placeholder="业务名称" required>
        <input type="number" id="weight" placeholder="权重" required>
        <button type="submit">添加</button>
    </form>

    <table id="businessTable">
        <thead>
        <tr>
            <th>ID</th>
            <th>业务ID</th>
            <th>业务名称</th>
            <th>权重</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据将被动态插入 -->
        </tbody>
    </table>
</div>

<script>
    var API_BASE_URL = 'http://101.43.69.172:7763';
<!--    var API_BASE_URL = 'http://192.168.88.25:7763';-->

    function loadBusinessData() {
        var url = API_BASE_URL+'/weight/configList';
        fetch(url)
            .then(response => response.json())
            .then(data => {
                const tbody = document.querySelector('#businessTable tbody');
                tbody.innerHTML = '';
                data.data.forEach(item => {
                    const tr = document.createElement('tr');
                    tr.innerHTML = `
                        <td>${item.id}</td>
                        <td>${item.systemId}</td>
                        <td>${item.systemName}</td>
                        <td>${item.weight}</td>
                        <td class="actions">
                            <button class="edit" onclick="editBusiness('${item.id}')">编辑</button>
                            <button class="delete" onclick="deleteBusiness('${item.id}')">删除</button>
                        </td>
                    `;
                    tbody.appendChild(tr);
                });
            });
    }

    function editBusiness(id) {
        const newWeight = prompt('请输入新的权重值:');
        if (newWeight !== null) {
            fetch(API_BASE_URL+`/weight/config/${id}`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ id, weight: newWeight })
            })
            .then(() => loadBusinessData());
        }
    }

    function deleteBusiness(id) {
        if (confirm('确定要删除此业务吗？')) {
            fetch(API_BASE_URL+`/weight/config/${id}`, {
                method: 'DELETE'
            })
            .then(() => loadBusinessData());
        }
    }

    document.getElementById('addBusinessForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const systemId = document.getElementById('systemId').value;
    const systemName = document.getElementById('systemName').value;
    const weight = document.getElementById('weight').value;

    fetch(API_BASE_URL+'/weight/saveConfig', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ systemId, systemName, weight })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.code !== 200) {
            alert(data.message);
            document.getElementById('systemId').value = '';
            document.getElementById('systemName').value = '';
            document.getElementById('weight').value = '';
        } else {
            loadBusinessData();
            document.getElementById('systemId').value = '';
            document.getElementById('systemName').value = '';
            document.getElementById('weight').value = '';
        }
    })
    .catch(error => {
        console.error('There was a problem with your fetch operation:', error);
        alert('Failed to save configuration. Please try again.');
        });
    });

    document.addEventListener('DOMContentLoaded', loadBusinessData);
</script>
</body>